<template>
	<view class="chart_box">
		<view class="chart_container">
			<view class="top">
				<view class="head">
					<image class="w-70rpx" src="@/static/ring/chart/temperature.png" mode="widthFix"></image>
					<text class="title">温度</text>
				</view>
				<view class="value">
					<text>{{ averageValue }}℃</text>
				</view>
			</view>
			<view class="chart">
				<l-echart ref="chartRef"></l-echart>
			</view>
			<view v-if="timeData.length == 2" class="chart_axis">
				<text>{{ timeData[0] }}</text>
				<text>{{ timeData[1] }}</text>
			</view>
		</view>
	</view>
</template>
<script>
import * as echarts from "echarts";
import dayjs from "dayjs";
import store from "@/store/index.js";
import { queryMyTemperatureInfoByDay } from "@/api/ring/chart.js";
import { removeTrailingZeros } from "@/js_sdk/utils/utils.js";

export default {
	props: {
		date: String,
	},

	data() {
		return {
			values: [],
			averageValue: 0,
			timeData: [],
			chartRef: null,
			chart: null,
		};
	},

	computed: {
		isLogin() {
			return store.state.userToken;
		},

		temperature() {
			return store.state.ringDataManage.temperature;
		},

		option() {
			return {
				color: ["rgba(15, 197, 255, 1)"],
				grid: {
					left: "0",
					right: "0",
					bottom: "0",
					top: "0",
					containLabel: false,
				},
				xAxis: [
					{
						show: false,
						type: "category",
					},
				],
				yAxis: [
					{
						show: false,
						type: "value",
						// min: this.min * 0.95,
						// max: this.max + 1,
					},
				],
				series: [
					{
						name: "Line 1",
						type: "line",
						showAllSymbol: true,
						symbol: "circle",
						symbolSize: 4,
						itemStyle: {
							color: "rgba(15, 197, 255, 1)",
						},
						lineStyle: {
							width: 1.5,
							color: "rgba(15, 197, 255, 1)",
						},
						areaStyle: {
							opacity: 1,
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: "rgba(25, 194, 233, 1)",
								},
								{
									offset: 1,
									color: "rgba(25, 194, 233, 0)",
								},
							]),
						},
						data: this.values,
						markLine: {
							data: [
								{
									yAxis: this.averageValue, // 基准线的位置（Y轴的数值）
								},
							],
							lineStyle: {
								color: "rgba(0, 0, 0, 0.5)", // 基准线的颜色
								type: "dashed", // 基准线的样式：虚线
								width: 1, // 基准线的宽度
							},
							symbol: "none", // 不显示箭头
							silent: true, // 禁用点击效果
							label: {
								show: false, // 隐藏数值标签
							},
						},
					},
				],
			};
		},
	},

	watch: {
		date() {
			this.updateChartData(this.date);
		},

		temperature(nv) {
			if (nv) {
				this.averageValue = nv;
			}
		},
	},

	async mounted() {
		if (this.$refs.chartRef && this.$refs.chartRef.init) {
			this.chartRef = this.$refs.chartRef;
			this.chart = await this.chartRef.init(echarts);
		}

		console.log("this.option", this.option);

		this.chart.setOption(this.option);
	},

	methods: {
		getTitle() {
			return 'activity';
		},
		updateChartData(date) {
			if (!this.isLogin) return;
			queryMyTemperatureInfoByDay({
				dateStr: dayjs(date || this.date).format("YYYY-MM-DD"),
				offsetMinutes: new Date().getTimezoneOffset(),
			}).then(async (res) => {
				console.log("queryMyTemperatureInfoByDay", res.data);

				try {
					const tempData = res.data;

					this.averageValue = tempData?.average ? Math.round(tempData.average) : "-";

					let data = removeTrailingZeros(tempData?.rates || []);
					this.values = data.map((_, i) => {
						return _.value || null;
					});

					if (data.length) {
						this.timeData[0] = "0:00";
						this.timeData[1] = +data[data.length - 1].time + ":00";
					} else {
						this.timeData = [];
					}

					if (!this.chartRef) {
						this.chartRef = this.$refs.chartRef;
					}

					if (!this.chart) {
						this.chart = await this.chartRef.init(echarts);
					} else {
						this.chart.clear();
					}

					setTimeout(() => {
						this.chart.setOption(this.option);
					}, 100);
				} catch (error) {
					console.log(" queryMyTemperatureInfoByDay error", error);
				}
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.chart_box {
	width: 100%;
	height: 100%;
	color: black;

	.w-70rpx {
		width: 70rpx;
	}

	.chart_container {
		width: 100%;
		height: calc(100% - 74rpx);
		padding: 20rpx 30rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 22rpx;
		}

		.head {
			width: 100%;
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.title {
				font-size: 32rpx;
				font-weight: 500;
				text-align: left;
				margin-left: 12rpx;
			}
		}

		.value {
			text {
				font-size: 48rpx;
				font-weight: 500;
				line-height: 68rpx;
				text-align: left;
				color: rgba(25, 194, 233, 1);
			}
		}

		.chart {
			width: 100%;
			height: 100rpx;
		}

		.chart_axis {
			width: 100%;
			height: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: rgba($color: #000000, $alpha: 0.5);
			font-size: 20rpx;
			font-weight: 300;
		}
	}
}
</style>
